<template>
	<view class="page">
		<view class="padding">
			<my-search></my-search>
		</view>
		<view class="content">
			<view class="banner">
				<swiper class="swiper" circular :autoplay="true">
					<swiper-item v-for="item in banner" @click="detailPage(item.goods_id)">
						<image class="img" :src="item.img" mode="scaleToFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="info flex-middle">
				<image class="icon" :src="infoIcon" mode=""></image>
				<!-- <img class="icon" src="../../static/image/info.png" mode=""></img> -->
				<!-- #ifndef MP-WEIXIN -->
				<u-notice-bar mode="horizontal" :speed="100" :isCircular="true" :list="publicMsg" :volume-icon="false"
					bg-color="#ffffff" color="#000" padding="0" style="flex:1"></u-notice-bar>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<u-notice-bar mode="horizontal" :speed="100" :isCircular="true" :list="publicMsg" :volume-icon="false"
					bg-color="#ffffff" color="#000" padding="0" style="width:100%;overflow: hidden;"></u-notice-bar>
				<!-- #endif -->
			</view>
			<view class="part_box">
				<view class="part" @click="navigate(item)" v-for="(item,index) in partData" :key="item.id">
					<image class="part_img" :src="item.icon" mode=""></image>
					<text class="part_text">{{item.name}}</text>
				</view>
			</view>

			<view>
				<u-popup v-model="showtel" mode="center" border-radius="14" length="60%">
					<view class="tel-flex">
						<view class="flex-box" @click="onselect(1)">
							<image class="tel-pic" :src="picture" mode=""></image>
							<view class="txt-size">
								电话联系
							</view>
						</view>

						<view class="flex-box lf-border" v-if="showline" @click="onselect(2)">
							<image class="tel-pic" :src="linpic" mode=""></image>
							<view class="txt-size">
								在线客服
							</view>
						</view>

					</view>
				</u-popup>
			</view>

			<view class="sale_box" v-if="saleData">
				<view class="title">限时特卖<view class="time"><text class="text">{{saleData.status==0?'距开始':'距结束'}}</text>
						<u-count-down :timestamp="countDown" :show-days="true" separator="zh" color="#fff"
							bg-color="#5E5E5E"></u-count-down>
					</view>
				</view>
				<view class="sale_content" @click="toCheapSale">
					<view class="goods" v-for="(item,index) in saleData.goods_list_3" :key="index">
						<image class="img" :src="item.img" mode="aspectFit"></image>
						<text class="name">{{item.goods_name}}</text>
						<view class="tag">特卖</view>
						<view v-show="canshowprice" class="unit">活动价：<text
								class="price">{{item.price}}</text>/{{item.goods_spu.spu_unit.title}}</view>
						<view v-show="canshowprice" class="unit old">原价：<text
								class="price">{{item.market_price}}</text>/{{item.goods_spu.spu_unit.title}}</view>
					</view>
				</view>
			</view>

			<view class="activity_box" v-if="parts.length>0">
				<view class="title">精选专题</view>
				<view class="style1  flex-btw" v-if="parts.length==1">
					<image :src="parts[0].img" @click="toPartDetail(parts[0].name,parts[0].id)" mode="scaleToFill">
					</image>
				</view>
				<view class="style2  flex-btw" v-else-if="parts.length==2">
					<view class="left">
						<image :src="parts[0].img" @click="toPartDetail(parts[0].name,parts[0].id)" mode="scaleToFill">
						</image>
					</view>
					<view class="right">
						<image :src="parts[1].img" @click="toPartDetail(parts[1].name,parts[1].id)" mode="scaleToFill">
						</image>
					</view>
				</view>
				<view class="style3  flex-btw" v-else-if="parts.length==3">
					<view class="left">
						<image :src="parts[0].img" @click="toPartDetail(parts[0].name,parts[0].id)" mode="scaleToFill">
						</image>
					</view>
					<view class="right">
						<image :src="parts[1].img" @click="toPartDetail(parts[1].name,parts[1].id)" mode="scaleToFill">
						</image>
						<image :src="parts[2].img" @click="toPartDetail(parts[2].name,parts[2].id)" mode="scaleToFill">
						</image>
					</view>
				</view>
			</view>
			<!-- <view class="title">精选商品：</view> -->
			<view class="recommend_box">
				<view class="goods" @click="detailPage(item.goods_id)" v-for="(item,index) in goodsList" :key="index">
					<div class="img">
						<image :src="item.img" mode="aspectFit"></image>
					</div>
					<div class="goods-content">
						<text class="name">{{item.name}}</text>
						<view class="tags" v-if="item.datum.length>0">
							<view class="tag" v-for="(y, index) in item.datum" :key="index">{{y.title}}</view>
						</view>
						<view class="detail" v-else-if="item.spu.length==1">
							<text>{{item.spu[0].describe||''}}</text>
						</view>
						<div class="price">
							<text class="unit"  v-show="canshowprice"><text class="price">{{item.showPrice}}<text
								v-if="item.spu.length==1 && item.spu[0].current_price==0" style="font-size:20rpx;">
								/{{item.spu[0].unit}}</text></text></text>
							<image @click.stop="showCart(index)" class="icon shop" src="../../static/image/addcart.png" mode="">
							</image>
						</div>
					</div>
				</view>
				<view class="noGoods" v-if="goodsList.length==0">
					<image :src="nodataImg" mode="aspectFit"></image>
					<view>暂时还没有推荐商品~</view>
				</view>
			</view>
		</view>
		
		<my-tabar ref="tabar" current="0"></my-tabar>
		
		<my-addcart ref="minicart" :canshowprice="canshowprice" @tabBarTag="changeTabBarTag"></my-addcart>

		<u-mask v-if="coupons.length>0" :show="showMask">
			<view class="warp">
				<view class="rect">
					<view class="pics">
						<image src="../../static/image/index_couponbg.png" mode="aspectFit"></image>
						<view class="abos">
							<view class="copon_box copon flex-btw" v-for="item in coupons">
								<view class="left">现金券</view>
								<view class="center flex-btw">
									<view class="center_left">
										<view class="price">￥{{item.coupons.money}}</view>
										<view class="info flex-center" @click="alertInfo(item.coupons.describe)">
											<u-icon name="question-circle"></u-icon>
											<text class="info_text">使用说明</text>
										</view>
									</view>
									<view class="center_right">
										<view class="rule" v-if="item.type==1">满{{item.coupons.order_money_limit}}使用
										</view>
										<view class="rule" v-else-if="item.type==2">无门槛</view>
										<view class="limit" v-if="item.coupons.get_limit">
											每位用户限制{{item.coupons.get_num}}张</view>
										<view class="limit" v-else>不限量</view>
										<view class="time" v-if="item.coupons.expire_type==1">
											{{parseTime(item.coupons.start_time)}}~{{parseTime(item.coupons.end_time)}}
										</view>
										<view class="time" v-else-if="item.coupons.expire_type==2">
											限{{item.coupons.expire_days}}天内使用</view>
									</view>
								</view>
								<view class="right" @click="toCouponMy">去查看</view>
							</view>
						</view>
					</view>

				</view>
				<u-icon @click="showMask=false" name="close-circle" size="60" color="#fff" class="close_icon"></u-icon>
			</view>
		</u-mask>
		
		
		<u-modal v-model="info.show" :content="info.value" title="使用说明" confirm-color="#4FA388"></u-modal>

		<!-- <u-mask v-if="coupons.length>0" :show="showMask" @click="" class="flex-center">
			<view class="mask_content">
				<view class="relat">
					<image class="couponbg" :src="couponbg" mode="aspectFit"></image>
					<view class="box">
						<view class="coupons">
							<view class="copon_box copon flex-btw" v-for="item in coupons">
								<view class="left">{{item.type==1?'普通券':'现金券'}}</view>
								<view class="center flex-btw">
									<view class="center_left">
										<view class="price">￥{{item.coupons.money}}</view>
										<view class="info flex-center">
											<u-icon name="question-circle"></u-icon>
											<text class="info_text">使用说明</text>
										</view>
									</view>
									<view class="center_right">
										<view class="rule" v-if="item.type==1">满{{item.coupons.order_money_limit}}使用
										</view>
										<view class="rule" v-else-if="item.type==2">无门槛</view>
										<view class="limit" v-if="item.coupons.get_limit">
											每位用户限制{{item.coupons.get_num}}张</view>
										<view class="limit" v-else>不限量</view>
										<view class="time" v-if="item.coupons.expire_type==1">
											{{parseTime(item.coupons.start_time)}}~{{parseTime(item.coupons.end_time)}}
										</view>
										<view class="time" v-else-if="item.coupons.expire_type==2">
											限{{item.coupons.expire_days}}天内使用</view>
									</view>
								</view>
								<view class="right" @click="toCouponMy">去查看</view>
							</view>
						</view>
					</view>
				</view>
				<u-icon @click="showMask=false" name="close-circle" size="60" color="#fff" class="close_icon"></u-icon>
			</view>
		</u-mask> -->
	</view>
</template>

<script>
	import {
		$https
	} from '@/static/js/request.js';
	// #ifdef H5
	const wx = require('jweixin-module');
	// #endif
	// #ifdef MP-WEIXIN
	let plugin = requirePlugin("WechatSI")
	// #endif
	export default {
		data() {
			return {
				logo: '',
				showLogo: 0,
				nodataImg: getApp().globalData.nodataImg,
				loginVolid: null,
				canshowprice: null, //是否在未登录时显示价格
				infoIcon: '../../static/image/info.png',
				picture: '../../static/image/tel.png',
				linpic: '../../static/image/line.png',
				// couponbg: './../static/image/index_couponbg.png',
				banner: [],
				parts: [], //精选专题
				publicMsg: [], //通知
				partData: [],
				goodsList: [],
				saleData: null, //限时特卖
				countDown: 0, //倒计时
				page: 1,
				num: 10,
				alltotal: null,

				showMask: true,
				coupons: [], //送的购物券
				info: {
					value: '',
					show: false,
				},
				showtel: false,
				showline: false,
				wx_url: "",
				telphone: "",
				corpId:""
			}
		},
		onReady() {
			this.getInfo();
			getApp().setTitle();
		},
		onLoad() {
			uni.hideTabBar();
			this.loginVolid = !Boolean(uni.getStorageSync('loginVolid').is_login_index);
			this.getGoods(1, this.num);
		},
		onShow() {
			this.getData();
			//推荐商品只请求一次，为防止退出时没有价格，登录时也没有价格。
			// 【2021-5-31更新】因为登录也可能不给你看价格
			// if(uni.getStorageSync('copartner_token')){
			// 	this.canshowprice = true;
			// } 
			this.$nextTick(function() {
				this.changeTabBarTag();
			})
		},
		methods: {
			getData() {
				$https('GETN', 'index', {}, res => {
					if (res.data.errcode == 0) {
						this.publicMsg = [res.data.data.notice];
						this.partData = res.data.data.nav;
						this.banner = res.data.data.poster;
						this.parts = res.data.data.project_list;
						this.coupons = res.data.data.coupons || [];
						//限时特卖
						if (res.data.data.panic_buy) {
							this.saleData = res.data.data.panic_buy;
							//0即将开始，1抢购中
							var now = (new Date().getTime() / 1000).toFixed(0);
							this.countDown = this.saleData.status == 1 ? (this.saleData.end_time - now) : (this
								.saleData.start_time - now);
						}
						let ismain = res.data.data.user_type == 1 ? true : false;
						uni.setStorageSync('wx_pay', res.data.data.wx_pay);
						uni.setStorageSync('isMain', ismain);
						uni.setStorageSync('cartTag', res.data.data.all_cart_num);
						uni.setStorageSync('open_points', res.data.data.open_points);
						uni.setStorageSync('canshowprice', res.data.data.look_goods_detail);
						this.canshowprice = res.data.data.look_goods_detail;
						// console.log(this.canshowprice)
						this.changeTabBarTag();
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.errmsg
						})
					}
				}, this.loginVolid)
			},

			getInfo() {
				$https('GETN', 'loginInfo', {}, res => {
					this.logoUrl = res.data.data.info.site_logo;
					uni.setNavigationBarTitle({
						title: res.data.data.info.site_title
					});
					this.loginVolid = {
						"is_login_index": res.data.data.info.is_login_index,
						"is_login_my": res.data.data.info.is_login_my,
						"is_login_cart": res.data.data.info.is_login_cart,
						"is_login_category": res.data.data.info.is_login_category,
					}
					if (res.data.data.info.is_login_index == 0) {
						this.showBackIcon = true;
					}
					uni.setStorageSync('title', res.data.data.info.site_title)
					uni.setStorageSync('logo', this.logoUrl)
					uni.setStorageSync('loginVolid', this.loginVolid)
				}, true)
			},
			
			getGoods(page, num) {
				let params = {
					page,
					size: num
				}
				$https('GET', 'getGoodsSelect', params, res => {
					if (res.data.errcode == 0) {
						var data = this.changePrice(res.data.data.list)
						this.goodsList = this.goodsList.concat(data);
						this.alltotal = res.data.data.count;
						// this.canshowprice = Boolean(res.data.data.look_goods_detail);
						this.page = page;
						//是否显示logo
						// uni.setStorageSync('showLogo',res.data.data.auto_watermark);
						// uni.setStorageSync('logo',res.data.data.site_logo);
						// this.showLogo = res.data.data.auto_watermark;
						// this.logo = res.data.data.site_logo;
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.errmsg
						})
					}
				}, this.loginVolid)
			},
			//处理价格规格sku
			changePrice(data) {
				var array = JSON.parse(JSON.stringify(data));
				for (let i in array) {
					//算出价格范围
					if (array[i].spu.length > 1) {
						var min, max;
						min = array[i].spu[0].market_price;
						if (array[i].spu[1].market_price < min) {
							max = Number(array[i].spu[0].market_price);
							min = Number(array[i].spu[1].market_price);
						} else {
							max = Number(array[i].spu[1].market_price);
							min = Number(array[i].spu[0].market_price);
						}
						for (let y in array[i].spu) {
							if (Number(array[i].spu[y].market_price) < min) {
								min = Number(array[i].spu[y].market_price)
							} else if (Number(array[i].spu[y].market_price) > max) {
								max = Number(array[i].spu[y].market_price);
							}
						}
						array[i].showPrice = `￥${min.toFixed(2)}~${max.toFixed(2)}`;
					} else if (array[i].spu.length == 1) {
						//是时价
						if (array[i].spu[0].current_price == 1) {
							array[i].showPrice = '时价';
						} else {
							array[i].showPrice = '¥' + array[i].spu[0].market_price;
						}
						//只有一个规格时显示起订量、库存
						array[i].minimum = array[i].spu[0].minimum;
						array[i].designated_inventory = array[i].spu[0].designated_inventory
						array[i].inventory_left = array[i].spu[0].inventory_left;
					}
					array[i].willBuyNum = array[i].num_cart_count;
				}
				return array;
			},
			
			detailPage(id) {
				//没有配置跳转的商品，id为0
				if (id) {
					uni.navigateTo({
						url: `../../pages/index/shopdetail?id=${id}`,
					})
				}
			},
			
			addToCart(goodsId, spuId, num, index) {
				var options = {
					goods_id: goodsId,
					spu_id: spuId,
					num,
				}
				$https('POSTN', 'changeCart', options, res => {
					if (res.data.errcode == 0) {
						this.goodsList[index].willBuyNum = Number(num);
						this.$refs.tabar.changetag(res.data.data.all_cart_num);
					} else {
						uni.showToast({
							title: res.data.errmsg,
							icon: 'none'
						})
					}
				})
			},
			//显示小购物车
			showCart(index) {
				var data = this.goodsList[index];
				console.log(this.goodsList)
				this.$refs.minicart.open(data)
			},
			//改变底部导航栏购物车tag
			changeTabBarTag(num) {
				this.$refs.tabar.changetag(num);
			},
			toPartDetail(name, id) {
				uni.navigateTo({
					url: `/pages/index/subject?id=${id}&name=${name}`
				})
			},
			toCheapSale() {
				uni.navigateTo({
					url: '/pages/index/cheap_sale'
				})
			},
			parseTime(time) {
				time = time * 1000;
				var date = new Date(time);
				var year = date.getFullYear(),
					month = date.getMonth() + 1 < 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1,
					day = date.getDate() < 9 ? '0' + date.getDate() : date.getDate();
				return `${year}-${month}-${day}`
			},
			//跳转
			navigate(item) {
				if (item.name == '联系客服') {
					this.showtel = true;
					this.telphone = item.route
					this.corpId = item.corpId
				}
				if (item.wx_url != null) {
					this.showline = true;
					this.wx_url = item.wx_url;
				}
				if (item.name == '意见反馈' && !uni.getStorageSync('copartner_token')) {
					uni.redirectTo({
						url: '/pages/account/login'
					})
				} else if (item.type == 2) {
					//跳到分类
					uni.reLaunch({
						url: `/pages/tabar/classify?navid=${item.nav_id}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/${item.route}`
					})
				}
			},
			//选择是客服电话还是在线客服
			onselect(type) {
				if (type == 1) {
					uni.makePhoneCall({
						phoneNumber: this.telphone,
						success:(res) => {

						},
						fail: (res) => {
							this.showtel = false
						}
					});
				} else {
					if (this.wx_url != "") {
						let url = this.wx_url; //获取地址栏路径
						let temp1 = url.split('//'); //对url地址进行分割

						// #ifdef H5
						window.open(`https://${temp1[1]}`)
						this.showtel = false;
						// #endif 

						// #ifdef MP-WEIXIN
						// uni.showToast({
						// 	title: '暂不支持',
						// 	icon: 'none'
						// })
						wx.openCustomerServiceChat({
							extInfo: {
								url: url
							},
							corpId: this.corpId,
							success(res) {
                              
							}
						})
						this.showtel = false
						// #endif 

						// #ifdef APP-PLUS
						plus.runtime.openURL(`https://${temp1[1]}`)
						this.showtel = false;
						// #endif
					}

				}

			},
			
			toCouponMy() {
				uni.navigateTo({
					url: '/pages/user/coupon/coupon_my'
				})
			},
			
			alertInfo(info) {
				this.info.value = info;
				this.info.show = true;
			},
			
		},
		onReachBottom() {
			if (this.goodsList.length < this.alltotal) {
				this.page++;
				this.getGoods(this.page, this.num);
			} else {

			}
		},
	}
</script>

<style lang="scss" scoped>
	/deep/.u-drawer {
		overflow: unset !important;
	}

	.page {
		position: relative;
		font-size: 24rpx;
		box-sizing: border-box;
		min-height: 100vh;
		background: #F6F6F7;

		.content {
			//#ifndef MP-WEIXIN
			margin-top: var(--status-bar-height);
			//#endif
			padding: 0 10rpx;
		}

		.banner {
			// margin-top:30rpx;
			width: 100%;
			height: 258rpx;

			.img {
				width: 100%;
				height: 258rpx;
			}

			uni-swiper {
				height: 100%;
			}
		}

		.info {
			display: flex;
			background: #fff;
			padding: 20rpx 12rpx;
			border-bottom-left-radius: 10rpx;
			border-bottom-right-radius: 10rpx;

			.icon {
				width: 60rpx;
				height: 60rpx;
				// margin-right:20rpx;
			}

			.text {
				flex: 1;
				margin: 0;
				padding: 0;
			}
		}

		.part_box {
			background: #fff;
			overflow: hidden;
			margin: 20rpx 0;
			// display: flex;
			// justify-content: space-between;
			// flex-wrap: wrap;
			// padding: 36rpx 40rpx 0;
			display: grid;
			grid-template-rows: repeat(2, 152rpx);
			grid-template-columns: repeat(5, 1fr);
			justify-items: center;
			border-radius: 10rpx;

			.part {
				float: left;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background: #fff;
				font-size: 24rpx;
				width: 110rpx;
				// margin-bottom: 36rpx;

				.part_img {
					width: 76rpx;
					height: 76rpx;
					margin-bottom: 8rpx;
				}

				.part_text {
					font-size: 24rpx;
					width: 96rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					text-align: center;
				}
			}
		}

		.title {
			font-size: 28rpx;
			font-weight: 500;
			color: #191919;
			margin-bottom: 16rpx;
			// margin:40rpx 0;
		}

		.activity_box {
			background: #fff;
			border-radius: 10rpx;
			width: 100%;
			padding: 10rpx;

			image {
				border-radius: 10rpx;
			}

			.style1 {
				image {
					height: 348rpx;
					width: 100%;
				}
			}

			.style2 {
				image {
					width:350rpx;
					// width: 290rpx;
					height: 262rpx;
				}
			}

			.style3 {
				height: 316rpx;

				.left {
					height: 316rpx;

					image {
						width: 230rpx;
						height: 316rpx;
					}
				}

				.right {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					image {
						// width: 404rpx;
						width: 360rpx;
						height: 146rpx;
					}
				}
			}
		}

		.recommend_box {
			position: relative;
			overflow: hidden;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			flex-wrap: wrap;
			margin: 10rpx 0;

			.goods {
				float: left;
				position: relative;
				display: flex;
				flex-direction: column;
				background: #fff;
				border-radius: 10rpx;
				width: 360rpx;
				// height: auto;
				box-sizing: border-box;
				// padding: 12rpx 0;
				margin-bottom: 10rpx;
				border-top-left-radius: 10rpx;
				border-top-right-radius: 10rpx;
    		overflow: hidden;

				&:nth-child(2n) {
					// margin-left:30rpx;
				}

				// .img {
				// 	width: 100rpx;
				// 	height: 92rpx;
				// }

				// .name {
				// 	font-size: 32rpx;
				// 	color: #191919;
				// 	margin: 14rpx 0 10rpx;
				// 	font-weight: bold;
				// }

				// .tags {
				// 	display: flex;

				// 	.tag {
				// 		padding: 0 12rpx;
				// 		// transform: scale(.8);
				// 		background: #E84B4B;
				// 		color: #fff;
				// 		border-radius: 6rpx;
				// 		font-size: 20rpx;
				// 		margin-left: 12rpx;
				// 	}
				// }

				// .detail {
				// 	height: 36rpx;
				// 	font-size: 24rpx;
				// 	padding: 0 10rpx;
				// 	box-sizing: border-box;
				// 	text-align: center;
				// 	color: #ccc;
				// 	width: 100%;
				// 	overflow: hidden;
				// 	text-overflow: ellipsis;
				// 	white-space: nowrap;
				// }

				// .unit {
				// 	margin: 5rpx 0;
				// 	color: #E84B4B;
				// 	font-size: 20rpx;

				// 	.price {
				// 		font-size: 28rpx;
				// 	}
				// }

				// .icon {
				// 	position: absolute;
				// 	z-index: 1;
				// 	top: 12rpx;

				// 	&.logo {
				// 		width: 80rpx;
				// 		left: 14rpx;
				// 	}

				// 	&.shop {
				// 		width: 38rpx;
				// 		height: 38rpx;
				// 		right: 14rpx;
				// 	}
				// }
				.img {
					width: 100%;
					display: flex;
					justify-content: center;
					image {
						width: 360rpx;
						height: 360rpx;
						min-height: 360rpx;
					}
				}
				&-content {
					display: flex;
					flex-direction: column;
					padding: 10rpx 20rpx;
					.name {
						font-size: 26rpx;
						color: #333333;
					}
					.tags {
						position: absolute;
						top: 10rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: flex-start;
						font-size: 24rpx;
						color: #d85131;
						
						.tag {
							margin-right: 10rpx;
							border: 1rpx solid #f5dcd7;
							padding: 0 6rpx;
							border-radius: 6rpx;
						}
					}
					.detail {
						font-size: 24rpx;
						color: #999999;
					}

					.price {
						display: flex;
						justify-content: space-between;
						align-content: center;
						height: 38rpx;


						.unit {
							font-size: 24rpx;
							color: #d85131;
							line-height: 38rpx;
						}

						.icon {
							position: absolute;
							z-index: 1;
							bottom: 12rpx;

							&.logo {
								width: 80rpx;
								left: 14rpx;
							}

							&.shop {
								width: 50rpx;
								height: 50rpx;
								right: 14rpx;
							}
						}
					}

					
				}
				
			}

			.noGoods {
				width: 320rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 0 auto;
				color: #CCCCCC;

				image {
					width: 100%;
					height: 240rpx;
					
				}
			}
		}

		.sale_box {
			background: #fff;
			border-radius: 10rpx;
			width: 100%;
			padding: 32rpx;
			margin-bottom: 20rpx;

			.time {
				display: inline-block;
				color: #808080;
				font-size: 20rpx;
				margin-left: 16rpx;

				.text {
					margin-right: 16rpx;
				}
			}

			.sale_content {
				display: flex;

				.goods {
					width: 196rpx;
					padding: 20rpx 0;
					line-height: 40rpx;
					// height:280rpx;
					box-shadow: 0px 4px 16px 2px rgba(216, 216, 216, 0.38);
					border-radius: 10rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					+.goods {
						margin-left: 20rpx;
					}

					.img {
						width: 102rpx;
						height: 102rpx;
					}

					.name {
						color: #191919;
						font-size: 26rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 90%;
						text-align: center;
					}

					.tag {
						font-size: 20rpx;
						padding: 0rpx 10rpx;
						line-height: 30rpx;
						// transform: scale(0.8);
						color: #fff;
						background: #F7C23E;
						border-radius: 8rpx;
					}

					.unit {
						color: #E84B4B;
						font-size: 20rpx;

						.price {
							font-size: 22rpx;
						}

						&.old {
							color: #CCCCCC;
							transform: sacle(.9);
							text-decoration: line-through;
						}
					}
				}
			}
		}
	}

	/deep/.u-mask-show {
		opacity: 1 !important;
	}

	.warp {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.rect {
		position: relative;
		height: auto;
	}

	.pics {
		height: auto;
		position: relative;
	}

	.pics image {
		width: 500rpx;
		height: 760rpx;
		display: block;
		margin: 0 auto;
		margin-top: 150rpx;
	}

	.abos {
		position: absolute;
		left: -36rpx;
		top: 290rpx;
		height: auto;
	}

	.copon_box {
		width: 570rpx;
		height: 164rpx;
		background-image: url(../../static/image/coupon.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 0 30rpx;
		margin-bottom: -30rpx;
		transform: scale(.7);

		.left {
			min-height: 150rpx;
			width: 40rpx;
			word-wrap: break-word;
			font-size: 28rpx;
			line-height: 40rpx;
			border-radius: 4rpx;
			text-align: center;
			padding: 10rpx 0;
			transform: scale(0.8);
		}

		.right {
			width: 40rpx;
			word-wrap: break-word;
			font-size: 22rpx;
			height: auto;
			border: 1px solid #fff;
			border-radius: 6rpx;
			text-align: center;
			padding: 10rpx 0;
			margin-left: 40rpx;
		}

		.center {
			flex: 1;

			.center_left {
				text-align: center;
				width: 50%;

				.price {
					font-size: 40rpx;
					font-weight: bold;
				}

				.info {
					text-align: center;
					color: #A4A4A4;
					font-size: 24rpx;

					.info_text {
						text-decoration: underline;
						margin-left: 4rpx;
					}
				}
			}

			.center_right {
				text-align: center;
				width: 50%;

				.rule {
					font-size: 24rpx;
				}

				.limit {
					font-size: 30rpx;
					transform: scale(.8);
				}

				.time {
					font-size: 28rpx;
					border-radius: 16rpx;
					padding: 7rpx 12rpx;
					transform: scale(0.7);
				}
			}
		}

		&.copon {
			.left {
				background: #F6D32D;
				color: #C6272A;
			}

			.right {
				color: #F6D32D;
				border-color: #F6D32D;
			}

			.center_left {
				.price {
					color: #c6272a;
				}
			}

			.center_right {
				color: #757575;

				.rule {
					color: #191919;
				}

				.time {
					background: #E9ADAE;
				}
			}
		}
	}

	.flex2 {
		background: #F6F6F7;
		padding: 0 34rpx;
		display: flex;
		align-items: center;
	}

	.wid_flex {
		flex: 1;
	}

	.aount_btn {
		z-index: 9;
		border: none;
		font-size: 30rpx;
		color: #4FA389;
		padding: 0rpx;
		margin-left: 20rpx;
		margin-top: 12rpx;
	}

	.voice {
		width: 35rpx;
		height: 40rpx;
	}

	.tel-flex {
		height: auto;
	}

	.flex-box {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24rpx 0rpx;
	}

	.tel-pic {
		width: 40rpx;
		height: 40rpx;
		margin-right: 30rpx;
	}

	.lf-border {
		border-top: 1px solid #cccccc;
	}

	.txt-size {
		font-size: 28rpx;
	}
</style>
